<template>
	<view class="content">
		<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor" :menuList="menuList"
		 @result="result"></sl-filter>
		<view class="course_list">
			<view class="pic-lsit m-t">
				<view 
					v-for="(item, index) in courseList" :key="index"
					class="pic-item"
					@click="navToDetailPage(item,'/pages/course/show')"
				>
					<view class="image-wrapper">
						<image :src="item.nav_list_logo" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="title uni-ellipsis">{{item.nav_name || ''}}</view>
						<view class="tt uni-ellipsis">{{item.difficulty_name || ''}} · {{item.already_num || 0}}人报名</view>
						<view class="price uni-ellipsis">
							<text class="tag">{{item.tag || ''}}</text>
							<text class="p1">{{item.nav_ori_price || '0.00'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			slFilter,
			uniLoadMore
		},
		data() {
			return {
				page: 1,
				themeColor: '#000000',
				titleColor: '#666666',
				menuList: [{
						'title': '学科',
						'isSort': true,
						'key': 'subject',
						'detailList': []
					},
					{
						'title': '难度',
						'key': 'difficulty',
						'isSort': true,
						'detailList': []
					}
				],
				
				loadingType: 'more', //加载更多状态
				courseList: [],
				category_id:'',
				difficulty_id: '',
			}
		},
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			this.initData();
		},
			
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1;
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			if(this.loadingType === 'nomore'){
				return;
			}
			if(this.loadingType === 'loading'){
				return;
			}
			this.page++;
			this.loadData();
		},
		
		methods: {
			async initData(){
				await this.getMenus();
				await this.loadData();
			},
			async getMenus(){
				await this.$http.post('api/common/category').then(res=>{
					if(res.code === this.sucCode){
						let list = res.data || [];
						if(list.length > 0){
							list = list.map((item)=>{
								let obj = {};
								obj.title = item.title;
								obj.value = item.id;
								return obj;
							});
							this.menuList[0].detailList = list;
						}
						
						
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
				await this.$http.post('api/common/difficulty').then(res=>{
					if(res.code === this.sucCode){
						let list = res.data || [];
						if(list.length > 0){
							list = list.map((item)=>{
								let obj = {};
								obj.title = item.title;
								obj.value = item.id;
								return obj;
							});
							this.menuList[1].detailList = list;
						}
						
						
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
				
			},
			//加载，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				// let courseList = await this.$api.json('courseList');
				//小课
				let params = {};
				params.page = this.page;
				params.pagesize = 10;
				if(this.category_id){
					params.category_id = this.category_id;
				}
				if(this.difficulty_id){
					params.difficulty_id = this.difficulty_id;
				}
				await this.$http.post('api/allcourse/index',params).then(res=>{
					if(res.code === this.sucCode){
						let courseList = res.data.list || [];
						if(type === 'refresh'){
							this.courseList = [];
						}
						this.courseList = this.courseList.concat(courseList);
						
						//判断是否还有下一页，有是more  没有是nomore
						this.loadingType  = courseList.length < params.pagesize ? 'nomore' : 'more';
						if(type === 'refresh'){
							if(loading == 1){
								uni.hideLoading()
							}else{
								uni.stopPullDownRefresh();
							}
						}
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
				
			},
			result(e){
				console.log('筛选结果',e);
				let filter = e;
				if(e.key === 'subject'){
					this.category_id = e.subject;
					
				}
				if(e.key === 'difficulty'){
					this.difficulty_id = e.difficulty;
					
				}
				this.page = 1;
				this.loadData('refresh');
				
				
			},
			//详情
			navToDetailPage(item,url) {
				
				uni.navigateTo({
					url: url + '?id='+item.nav_id
				})
			},
		},
	}
</script>
